import { useState } from 'react';
import { connect } from 'react-redux';
import { Input, Button } from 'antd';

function AddEmployee({ employee, dispatch }) {

    const [newFirstName, setNewFirstName] = useState("");
    const [newLastName, setNewLastName] = useState("");
    const [newAge, setNewAge] = useState("");
    const [newAddress, setNewAddress] = useState("");

    function createEmployeeHandler() {
        dispatch({
            type: 'createEmployee',
            payload: {
                employee: {
                    firstName: newFirstName,
                    lastName: newLastName,
                    age: newAge,
                    address: newAddress
                }
            }
        })
    }

    return (
        <div>
            <table>
                <tbody>
                    <tr>
                        <td>First Name：</td>
                        <td><Input onChange={e => setNewFirstName(e.target.value)} /></td>
                    </tr>
                    <tr>
                        <td>Last Name：</td>
                        <td><Input onChange={e => setNewLastName(e.target.value)} /></td>
                    </tr>
                    <tr>
                        <td>Age：</td>
                        <td><Input onChange={e => setNewAge(e.target.value)} /></td>
                    </tr>
                    <tr>
                        <td>Address：</td>
                        <td><Input onChange={e => setNewAddress(e.target.value)} /></td>
                    </tr>
                    <tr>
                        <td><Button onClick={createEmployeeHandler}>submit</Button></td>
                    </tr>
                </tbody>
            </table>
        </div>
    )
}

export default connect(({ employee }) => ({ employee }))(AddEmployee);